<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>timer</title>
    <style>
        body {
            background-color: rgb(11, 48, 90);
            /*font-family: 'Consolas, Monaco, Courier New';*/
        }
        #timerText {
            color: rgb(255, 255, 255);
            font-size: 100px;
        }
        #nowTimeText {
            color: rgb(255, 255, 255);
            /*font-size: 100px;*/
        }
    </style>
    <script>
        var startTime = new Date().getTime();
        var timerInterval;
        var nowTimeInterval = setInterval(nowTime, 10); /* 设置1ms定时器 */

        if (!Date.prototype.format) {
            Date.prototype.format = function (fmt) {
                var o = {
                    "M+": this.getMonth() + 1,  /* 月份 */
                    "d+": this.getDate(),       /* 日 */
                    "h+": this.getHours(),      /* 小时 */
                    "H+": this.getHours() - 8,  /* 小时 */
                    "m+": this.getMinutes(),    /* 分 */
                    "s+": this.getSeconds(),    /* 秒 */
                    "q+": Math.floor((this.getMonth() + 3) / 3) /* 季度 */
                };
                /* 根据y的长度来截取年 */
                if (/(y+)/.test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                }
                /* 根据S的长度来截取年 */
                if (/(S+)/.test(fmt)){
                    fmt = fmt.replace(RegExp.$1, ("000" + this.getMilliseconds()).substr(-RegExp.$1.length));
                }
                for (var k in o){
                    if (new RegExp("(" + k + ")").test(fmt))
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                }
                return fmt;
            }
        }

        if (!String.prototype.format) {
            String.prototype.format = function() {
                var args = arguments;
                return this.replace(/{(\d+)}/g, function(match, number) { 
                    return typeof args[number] != 'undefined'
                        ? args[number]
                        : match;
                });
            };
        }

        function nowTime() {
            document.getElementById('nowTimeText').innerText = new Date().format("yyyy-MM-dd hh:mm:ss");
        }

        function start() {
            startTime = new Date().getTime(); /* 获取开始时间 */
            timerInterval = setInterval(timer, 1); /* 设置1ms定时器 */
            document.getElementById('timerText').innerText = new Date().format("HH:mm:ss.SSS");
        }

        function timer() {
            var timerDate = new Date().getTime() - startTime;
            var timerDate2 = new Date();
            timerDate2.setTime(timerDate);
            document.getElementById('timerText').innerText = timerDate2.format("HH:mm:ss.SSS");
        }

        function Reset() {
            window.clearInterval(timerInterval);
            document.getElementById('timerText').innerText = new Date(0).format("HH:mm:ss.SSS");
        }

        function stop() {
            window.clearInterval(timerInterval);
        }

    </script>
</head>

<body>
    <div style="text-align: center">
        <p><code id="timerText">00:00:00.000</code></p>
        <p><code id="nowTimeText">0000-00-00 00:00:00</code></p>
        <button type="button" onclick="start()">start</button>
        <button type="button" onclick="stop()">stop</button>
        <button type="button" onclick="Reset()">reset</button>
    </div>
</body>

</html>